"use client";
import { PowerIcon, ArrowRightIcon } from './Icons';
import React from 'react';

interface WelcomeProps {
  onSend: (text: string) => void;
}

const Welcome: React.FC<WelcomeProps> = ({ onSend }) => {
  const prompts = [
    {
      "title": "用小学生都能听懂的术语解释什么是量子纠缠",
      "content": "用小学生都能听懂的术语解释什么是量子纠缠"
    },
    {
      "title": "能给一位6岁男孩的生日会提供一些创造性的建议吗？",
      "content": "能给一位6岁男孩的生日会提供一些创造性的建议吗？"
    },
    {
      "title": "如何用 Go 语言实现支持代理 Http client 请求？",
      "content": "如何用 Go 语言实现支持代理 Http client 请求？"
    }
  ];
  const plugins = [
    {
      "title": "今日早报: 获取当天全球的热门新闻事件列表",
      "content": "今日早报"
    },
    {
      "title": "微博热搜: 新浪微博热搜榜,微博当日热搜榜单",
      "content": "微博热搜"
    },
    {
      "title": "今日头条: 给用户推荐当天的头条新闻,周榜热文",
      "content": "今日头条"
    }
  ];
  const creative = [
    {
      "title": "轻松扮演翻译专家,程序员,AI女友,文案高手...",
      "content": "帮我扮演一个翻译专家"
    },
    {
      "title": "国产大语言模型支持,百度文心,科大讯飞,ChatGLM...",
      "content": "使用国产大模型"
    },
    {
      "title": "绘画: 马斯克开拖拉机,20世纪,中国农村,3:2",
      "content": "帮我画一幅画"
    }
  ];
  return (
      <div className="welcome-container">
        <div className="title">AI智能对话平台</div>
        <div className="examples-grid">
          <div className="example-section">
            <div className="example-section-title">
              <PowerIcon/> 小试牛刀
            </div>
            <div className="example-items">
              {prompts.map((item, index) => (
                  <div key={index} className="example-item" onClick={() => onSend(item.content)}>
                    <span>{item.title}</span>
                  </div>
              ))}
            </div>
          </div>
          <div className="example-section">
            <div className="example-section-title">
              <ArrowRightIcon/> 插件增强
            </div>
            <div className="example-items">
              {plugins.map((item, index) => (
                  <div key={index} className="example-item" onClick={() => onSend(item.content)}>
                    <span>{item.title}</span>
                  </div>
              ))}
            </div>
          </div>
          <div className="example-section">
            <div className="example-section-title">
              <ArrowRightIcon/> 能力扩展
            </div>
            <div className="example-items">
              {creative.map((item, index) => (
                  <div key={index} className="example-item" onClick={() => onSend(item.content)}>
                    <span>{item.title}</span>
                  </div>
              ))}
            </div>
          </div>
        </div>
      </div>
  );
};

export default Welcome; 